<template>
  <header class="w-full bg-black text-white py-4 px-6 flex justify-between items-center fixed">
    <h1 class="text-lg font-bold">
    </h1>
    <div class="text-sm" v-if="isLoggedIn">
      <span class="mr-4">Welcome，{{ userName }}</span>
      <button @click="handleLogout" class="bg-red-600 hover:bg-red-700 px-3 py-1 rounded-xl">
        Logout
      </button>
    </div>
  </header>
</template>

<script setup>
import { computed, onMounted, ref } from 'vue';

const token = ref('');
const userInfo = ref(null);

onMounted(() => {
  token.value = localStorage.getItem('token') || '';
  const info = localStorage.getItem('userInfo');
  if (info) {
    try {
      userInfo.value = JSON.parse(info);
    } catch (e) {
      userInfo.value = null;
    }
  }
});

const isLoggedIn = computed(() => !!token.value);
const userName = computed(() => userInfo.value?.name || '');

function handleLogout() {
  localStorage.removeItem('token');
  localStorage.removeItem('userInfo');
  location.reload();
}
</script>

<style scoped>
/* 可根据项目主题扩展 */
</style>
